<template>
  <view>
    <!-- 搜索条 -->
    <view class="searchTopBox">
        <uni-search-bar class="uni-mt-10" radius="100"
                        placeholder="关键字"
                        clearButton="auto"
                        cancelButton="none"
                        @confirm="searchNow()"
                        v-model="ipt"
        />
    </view>
    <!-- 搜索历史 -->
    <view class="searchBotBox">
      <view class="ov">
        <view class="fl">搜索历史</view>

        <view @tap="clearKey" class="fr">
          <uni-icons type="trash-filled" size="26"></uni-icons>
        </view>
      </view>
      <view class="searchHistoryBox">
        <view class="searchHistoryBoxItem" @click="()=>{this.ipt=item,searchNow()}" v-for="(item,index) in searchKey" :key='index'>
          {{item}}
        </view>
      </view>
    </view>
    <!-- 热门搜索 -->
    <view class="searchBotBox">
      <view class="ov">
        <view class="fl">热门搜索</view>

<!--        <view @tap="clearKey" class="fr">-->
<!--          <uni-icons type="trash-filled" size="26"></uni-icons>-->
<!--        </view>-->
      </view>
      <view class="searchHistoryBox">
        <view class="searchHistoryBoxItem" @click="()=>{this.ipt=item,searchNow()}" v-for="(item,index) in searchKey" :key='index'>
          {{item}}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      searchKey: [],
      ipt: '',
      searchClose: true,
    }
  },
  onShow() {
    var vv = uni.getStorageSync('searchLocal');
    if(vv){
      var arr = vv.split("-");
      this.searchKey = arr;
    }

  },
  methods: {

    clearKey: function() {
      var that = this;
      uni.showModal({
        title: '提示',
        content: '点击确定将删除所有历史信息，确定删除吗？',
        success: function(res) {
          if (res.confirm) {
            that.searchKey = [];
            uni.setStorage({
              key: 'searchLocal',
              data: ""
            });

          } else if (res.cancel) {

          }
        }
      });

    },
    searchNow: function(e) {
      if (this.ipt == '') {
        uni.showToast({
          title: '未输入搜索关键字',
          icon: 'none',
          duration: 1000
        });
        return false;
      }
      var that = this;
      var newArr = that.searchKey;
      newArr.push(this.ipt);
      //去重
      newArr= [...new Set(newArr)]
      this.searchKey = newArr;
      var newStr = newArr.join('-');
      uni.setStorage({
        key: 'searchLocal',
        data: newStr
      });
      this.goToGoodIndex(this.ipt);

    },
    goToGoodIndex(search){
      uni.navigateTo({
        url: '/pages/buyer/public/Good/index?search=' + encodeURIComponent(JSON.stringify(search)),
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    }
  }
}
</script>
<style>
page {
  background: #FFF;
}

.ov {
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.searchTopBox {
  width: 100%;
  background-color: #ffffff;
  height: 100upx;
  box-sizing: border-box;
  padding-top: 15upx;
}

.searchBoxRadius {
  width: 90%;
  height: 70upx;
  background-color: #fff;
  margin-left: 5%;
  overflow: hidden;
  border-radius: 35upx;
}

.searchBoxIcon {
  font-size: 40upx;
  margin-top: 20upx;
  margin-left: 20upx;
  float: left;
}

.searchBoxIpt {
  height: 70upx;
  line-height: 70upx;
  margin-left: 20upx;
  float: left;
}

.searchBotBox {
  width: 100%;
  margin-top: 30upx;
  padding: 15upx 3%;
  box-sizing: border-box;
}

.searchHistoryBox {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 40upx;
}

.searchHistoryBoxItem {
  float: left;
  font-size: 26upx;
  color: #666;
  line-height: 46upx;
  height: 46upx;
  padding: 0 20upx;
  border-radius: 23upx;
  margin-left: 15upx;
  margin-bottom: 20upx;
  border: 1px solid #ccc;
}
</style>
